<template name="usuarios">
    <h2>Ver Rol por usuario</h2>
    {{pagination}}
    <br/>
    <div id="editar" title="Editar Rol" style="display: none">
        <input type="hidden" id="edit_iduser" value="">
        Editar el rol del usuario <strong><span id="edit_username"></span></strong>
        <br/>
        <br/>
        <span>Nuevo rol:</span>
        <select id="edit_fkrol">
            <template name="rol">
            <option value="{{idrol}}">{{nombre_rol}}</option>
            </template>
        </select>
        <div id="asignar_loading" style="display:none; text-align: center;">
            <br/>
            <img src="/images/maps/loading.gif" />
            <br/>
            <strong>Asignando...</strong>
        </div>
    </div>
    <table style="width: 100%">
        <tr>
            <th>Nombre de usuario</th>
            <th>Rol</th>
            <th style="width: 120px";>Acciones</th>
        </tr>
        <template name="usuario">
        <tr>
            <td><span id="username_{{iduser}}">{{username}}</span></td>
            <td><span id="nombre_rol_{{iduser}}">{{nombre_rol}}</span><input type="hidden" id="rol_{{iduser}}" value="{{fkrol}}"/></td>
            <td>
                <div class="editar" idElemento="{{iduser}}">Editar</div>
                <div class="acciones" idElemento="{{iduser}}">Ver acciones</div>
            </td>
        </tr>
        </template>
    </table>
    <script type="text/javascript">

        var asignando = false;

        $(function(){
            $('.editar').button( { icons: {primary: "ui-icon-note"} } ).bind('click', function() { editar($(this).attr('idElemento')); } );
            $('.acciones').button( { icons: {primary: "ui-icon-clipboard"} } ).bind('click', function() { location.href='{{action_acciones_por_usuario}}?id='+$(this).attr('idElemento'); } );
        });

        function editar(id)
        {
            if (!asignando)
            {
                $("#editar").dialog({
                    resizable: false,
                    height:240,
                    modal: true,
                    open: function( event, ui ) {
                        $('#edit_iduser').val(id);
                        $('#edit_username').html($('#username_'+id).html());
                        $('#edit_fkrol').val($('#rol_'+id).val());
                    },
                    buttons:
                    {
                        "Guardar": function()
                        {
                            $.ajax({
                                dataType   : "json",
                                type       : "POST",
                                data       : {'iduser' : $('#edit_iduser').val(), 'fkrol' : $('#edit_fkrol').val()},
                                url        : '{{asignar_action}}',
                                beforeSend : function()
                                {
                                    asignando = true;
                                    $('#asignar_loading').show();
                                },
                                success : function(data)
                                {
                                    asignando = false;
                                    $('#asignar_loading').hide();
                                    $("#editar").dialog( "close" );
                                    if ((data['res'] == undefined) || (data['res'] == 'err'))
                                    {
                                        error('Error asisgnando rol');
                                    }
                                    else
                                    {
                                        if (data['rol'] == '')
                                        {
                                            data['rol'] = 'Sin Rol Asignado';
                                        }
                                        $('#rol_'+id).val($('#edit_fkrol').val());
                                        $('#nombre_rol_'+id).html(data['rol']);
                                        notice('Rol asignado con &eacute;xito!');
                                    }
                                }
                            });
                        },
                        "Cancelar": function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });
            }
            else
            {
                notice("Existe una asignaci&oacute;n pendiente! Espere para poder continuar o recargue la p&aacute;gina.");
            }
        }
    </script>
</template>